<template>
	<view class="wrap">
    <fa-navbar title="酒店评价" :border-bottom="false"></fa-navbar>
     <view class="paddLR u-flex u-col-center u-row-between bgff u-m-b-10 u-p-30">
       <view class="w1  u-text-center">
         <view>
           <text class="b u-font-36 u-primary">4.8</text>
           <text>很好</text>
         </view>
         <view class="u-font-24">来自1453条点评</view>
       </view>
       <view class="line"></view>
       <view class="w2 u-flex u-flex-1 u-col-center u-row-between u-flex-wrap">
         <view class="u-flex u-col-center w5">
           <text class="u-font-24 u-m-r-8">设施</text>
           <u-line-progress :show-percent="false" class="u-flex-1" active-color="#2979ff" :height="10" :percent="96"></u-line-progress>
           <text class="u-primary u-m-l-10 b u-font-24">4.8</text>
         </view>
         <view class="u-flex u-col-center w5">
           <text class="u-font-24 u-m-r-8">卫生</text>
           <u-line-progress :show-percent="false" class="u-flex-1" active-color="#2979ff" :height="10" :percent="70"></u-line-progress>
           <text class="u-primary u-m-l-10 b u-font-24">4.8</text>
         </view>
         <view class="u-flex u-col-center w5">
           <text class="u-font-24 u-m-r-8">服务</text>
           <u-line-progress :show-percent="false" class="u-flex-1" active-color="#2979ff" :height="10" :percent="70"></u-line-progress>
           <text class="u-primary u-m-l-10 b u-font-24">4.8</text>
         </view>
         <view class="u-flex u-col-center w5">
           <text class="u-font-24 u-m-r-8">风格</text>
           <u-line-progress :show-percent="false" class="u-flex-1" active-color="#2979ff" :height="10" :percent="70"></u-line-progress>
           <text class="u-primary u-m-l-10 b u-font-24">4.8</text>
         </view>
       </view>
     </view>
     <!-- tabs -->
     <u-sticky>
       <view class="tab paddLR u-flex u-flex-1 u-col-center u-row-between u-text-center bgff">
         <view v-for="item in tabList" :key="item.id" class="item">
           <text class="u-font-28 b">{{item.name}}</text>
           <text class="num u-font-20">(60)</text>
         </view>
       </view>
     </u-sticky>
     <!-- 评价 -->
     <view class=" shadow box5 pingjia-box re">
       <b-pingjia :list="banner"></b-pingjia>
     </view>
  </view>
</template>
<style lang="scss" scoped>
  .line{width: 1px; height: 70rpx; background-color: #ededed; margin: 0 26rpx;}
  .w2{
    .w5{width: 48%;}
  }
  .tab{
    border-bottom: 1px solid #ededed;
    .item{padding: 30rpx 0; display: flex; align-items: flex-end; justify-content: center;  line-height: 1;}
    .num{font-size: 22rpx; font-weight: normal;}
  }
</style>
<script>
	export default {
		data() {
			return {
        tabList:[
          {id:1, name:'全部'},
          {id:2, name:'有图·视频'},
          {id:3, name:'好评'},
          {id:4, name:'待改善'}
        ],
        banner: [
          {
            image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
            title: '昨夜星辰昨夜风，画楼西畔桂堂东',
            name:'劳斯莱斯酒店劳斯莱斯酒店劳斯莱斯酒店劳斯莱斯酒店劳斯莱斯酒店'
          },
          {
            image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
            title: '身无彩凤双飞翼，心有灵犀一点通',
            name:'支付宝哈罗酒店'
          },
          {
            image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
            title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
            name:'天天向上酒店'
          },{
            image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
            title: '昨夜星辰昨夜风，画楼西畔桂堂东',
            name:'劳斯莱斯酒店劳斯莱斯酒店劳斯莱斯酒店劳斯莱斯酒店劳斯莱斯酒店'
          },
          {
            image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
            title: '身无彩凤双飞翼，心有灵犀一点通',
            name:'支付宝哈罗酒店'
          },
          {
            image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
            title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
            name:'天天向上酒店'
          },
        ],
        
			}
		},
    onReady(){
    },
    watch: {
      
    },
		methods: {
      showImages(imgUrl, index){
        imgUrl = imgUrl.map(m=>{return m.image})
        uni.previewImage({
          loop: true,
          urls: imgUrl, //可以展示imgUrl 列表中所有的图片
          current: index //首先当前index对应图片，左右可以切换其他序号的图片
        });
      }
		}
	}
</script>